<template>
	<view class="pt14 h100 column">
		<view class="w-calc-30 flex-1 scrolly bgf">
			<view class="title pt23">余额明细</view>
			<view class="money-ctn">
				<view :class="['money-item', money === 100 && 'item-act']" @click="money = 100">100元</view>
				<view :class="['money-item', money === 200 && 'item-act']" @click="money = 200">200元</view>
				<view :class="['money-item', money === 500 && 'item-act']" @click="money = 500">500元</view>
				<view :class="['money-item', money === 1000 && 'item-act']" @click="money = 1000">1000元</view>
			</view>
			<view class="justify-between align-center mt43">
				<view class="title">充值金额</view>
				<view class="tip">单笔限制0-1万元</view>
			</view>
			<view class="input-ctn">
				<view class="mr17 fs32">￥</view>
				<input type="digit" placeholder="请输入" placeholder-class="input-holder" class="input-ref" v-model="money"
					@input="onChangeMoney" @blur="onChangeMoney" />
			</view>

			<view class="mt100">
				<u-button type="primary" @click="handleRecharge"
					:customStyle="{ height: '80rpx', borderRadius: '15rpx', fontSize: '30rpx' }">
					立即充值
				</u-button>
			</view>

			<view class="center gap18 mt64">
				<u-line length="140rpx" color="#c9c9c9"></u-line>
				<text class="fs24 color6">充值说明</text>
				<u-line length="140rpx" color="#c9c9c9"></u-line>
			</view>
			<view class="explain">
				<view class="">1、充值后余额可用于查询付费使用</view>
				<view class="">2、未使用的余额可以申请原路退回</view>
				<view class="">3、联系我们:400567568</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		createRechargeOrder
	} from "@/api/user/index";
	import {
		pay
	} from "@/api/pay";
	import {
		checkLogin,
		navBack,
		navTo,
		showSuccess,
		showToast
	} from "@/core/app";
	import {
		ref
	} from 'vue';
	const money = ref(null);
	const handleRecharge = async () => {
		if (!money.value) return showToast('请输入充值金额')
		let res = await createRechargeOrder({
			money: money.value
		})
		const order_no = res.data.order_no
		res.data.order_no && pay({
			order_no,
			payment_type: ''
		})
	}
	const onChangeMoney = (e) => {
		if (e.detail.value > 10000) money.value = 10000
	}
</script>

<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}

	.money-ctn {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 21rpx 35rpx;
		margin-top: 21rpx;

		.money-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 173rpx;
			background: #f4f5f9;
			border-radius: 20rpx;
			border: 4rpx solid #ffffff;
			transition: all 0.3s;
		}

		.item-act {
			background-color: #dce8ff;
			border: 4rpx solid #0759bb;
		}
	}

	.tip {
		font-weight: bold;
		font-size: 28rpx;
		color: #ff2121;
	}

	.input-ctn {
		padding: 30rpx 18rpx;
		box-sizing: border-box;
		background-color: #f4f4f4;
		border-radius: 20rpx;
		height: 102rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		margin-top: 18rpx;

		.input-holder {
			font-weight: 400;
			font-size: 28rpx;
			color: #6e6e6e;
		}
	}

	.explain {
		padding: 18rpx 21rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 234rpx;
		background: #f4f5f9;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-weight: 400;
		font-size: 26rpx;
		color: #656565;
	}
</style>